import { BasicColumn, BasicTable, FormSchema, useTable } from "@/components/Table";
import { formatDate } from "@/utils/util";
import { Button, Tag } from "antd";
import { processInstanceApi } from "@/api/bpm/task/processInstance";
import HandlingProcess from "../task/todo/components/handlingProcess";
import { useDrawer } from "@/components/Drawer";
import CancelProcess from "./components/cancelProcess/index";
import { useTranslation } from "react-i18next";
const index = () => {
	const { t } = useTranslation();
	const en_vi = "task.processInstance";
	const columns: BasicColumn[] = [
		{
			title: t(`${en_vi}.processName`),
			dataIndex: "name"
		},
		{
			title: t(`${en_vi}.processClassification`),
			dataIndex: "cateName"
		},
		{
			title: t(`${en_vi}.processStatus`),
			dataIndex: "status",
			render: (status: any) => {
				if (status === 1) return <Tag color="processing">{t(`${en_vi}.inApproval`)}</Tag>;
				if (status === 2) return <Tag color="success">{t(`${en_vi}.approved`)}</Tag>;
				if (status === 3) return <Tag color="error">{t(`${en_vi}.notApproved`)}</Tag>;
				if (status === 4) return <Tag color="warning">用户自己取消</Tag>;
			}
		},
		{
			title: t(`${en_vi}.startTime`),
			dataIndex: "startTime",
			render: (time: any) => {
				return formatDate(new Date(time));
			}
		},
		{
			title: t(`${en_vi}.endTime`),
			dataIndex: "endTime",
			render: (time: any) => {
				if (!time) return "";
				return formatDate(new Date(time));
			}
		},
		{
			title: t("kevin_ui.operate"),
			render: (_, record: any) => {
				return (
					<div>
						<Button type="link" onClick={handle(record)}>
							{t(`${en_vi}.endTime`)}
						</Button>
						<Button type="link" onClick={reissue(record)}>
							{record.endTime ? t(`${en_vi}.reissue`) : t(`${en_vi}.cancel`)}
						</Button>
					</div>
				);
			}
		}
	];
	const schemas: FormSchema[] = [
		{
			field: "name",
			label: t(`${en_vi}.processName`),
			component: "Input"
		},
		{
			field: "cateName",
			label: t(`${en_vi}.processClassification`),
			component: "Input"
		},
		{
			field: "status",
			label: t(`${en_vi}.status`),
			component: "Select",
			componentProps: {
				options: [
					{
						label: t(`${en_vi}.inApproval`),
						value: 1
					},
					{
						label: t(`${en_vi}.approved`),
						value: 2
					},
					{
						label: t(`${en_vi}.notApproved`),
						value: 3
					}
				]
			}
		},
		{
			field: "time",
			label: t(`${en_vi}.initiationTime`),
			component: "RangePicker"
		}
	];
	const [registerTable] = useTable({
		api: processInstanceApi.processInstanceMyPage,
		columns,
		useSearchForm: true,
		formConfig: {
			labelWidth: 150,
			schemas,
			showActionButtonGroup: true,
			baseColProps: { span: 6 },
			actionColOptions: { span: 24 }
		},
		bordered: true
	});
	const [registerDrawer, { openDrawer }] = useDrawer();
	const [registerDrawerCancelProcess, { openDrawer: openDrawerCancelProcess }] = useDrawer();
	const handle = (record: any) => () => {
		openDrawer(true, {
			record,
			page: "processInstance"
		});
	};
	const reissue = (record: any) => async () => {
		if (!record.endTime) {
			openDrawerCancelProcess(true, {
				record
			});
			return;
		}
		await processInstanceApi.processDefinition(record.processDefinitionId);
		// message.error("重新发起流程失败，原因：该流程使用业务表单，不支持重新发起");
	};
	return (
		<div>
			<BasicTable register={registerTable}></BasicTable>
			<HandlingProcess register={registerDrawer}></HandlingProcess>
			<CancelProcess register={registerDrawerCancelProcess}></CancelProcess>
		</div>
	);
};
export default index;
